<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渲染列表</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>
    <!-- 引入babel，将JSX翻译成JS代码，需要在script标签中设置type：text -->
    <!-- /babel -->
    <script src="script/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        
        // JSX中只能用来放js表达式，而不能放语句（if for）

        let div
        let lang = 'cn'        
        if (lang == 'cn') {
            div = <div>你好</div>
        } else {
            div = <div>hello</div>
        }

        // 渲染列表
        const data = ['xzl', 'ydd', 'jdy']
        
        // let list = data.map(item => <li>{item}</li>)
        // let ul = <ul>{list}</ul>

        let ul = <ul>{data.map(item => <li>{item}</li>)}</ul>

        const root = ReactDOM.createRoot(document.getElementById('root'))

        root.render(ul)
    </script>
</body>

</html>